<template>
  <div>
    <van-sticky>

      <div class="demo-nav" style>
        <div class="demo-nav__title">同城安装</div>
        <router-link :to="'/#'" class="demo-nav__back">
          <svg viewBox="0 0 1000 1000" >

            <path fill="#969799" fill-rule="evenodd" d="M296.114 508.035c-3.22-13.597.473-28.499 11.079-39.105l333.912-333.912c16.271-16.272 42.653-16.272 58.925 0s16.272 42.654 0 58.926L395.504 498.47l304.574 304.574c16.272 16.272 16.272 42.654 0 58.926s-42.654 16.272-58.926 0L307.241 528.058a41.472 41.472 0 0 1-11.127-20.023z">
            </path>

          </svg>
        </router-link>
      </div>
    </van-sticky>
    <div>
      <van-search
        v-model="value"
        show-action
        label=""
        placeholder="请输入搜索关键词"
        @search="onSearch"
      >
        <template #action>
          <div @click="onSearch">搜索</div>
        </template>
      </van-search>
    </div>
    <div>
      <van-swipe :autoplay="3000">
        <van-swipe-item v-for="(image, index) in images" :key="index">
          <img class="img_tu" v-lazy="image" />
        </van-swipe-item>
      </van-swipe>
    </div>
    <van-form style="text-align: center;background-color: #dcdee0;padding: 0.5rem">
      <van-row>
        <van-col span="12">
          <van-cell is-link :value="areaTest" @click="showArea = true"/>
          <van-action-sheet v-model="showArea" title="地址">
            <van-area
              :area-list="areaList"
              :columns-placeholder="['请选择', '请选择', '请选择']"
              @cancel="cancelArea"
              @confirm = "confirmArea"
            />
          </van-action-sheet>
        </van-col>
        <van-col span="1"></van-col>
        <van-col span="7">

          <van-field
            readonly
            clickable
            name="picker"
            v-model="value"
            label=""
            right-icon="arrow-down"
            placeholder="类型"
            @click="showPicker = true"
          />
          <van-popup v-model="showPicker" position="bottom">
            <van-picker
              show-toolbar
              :columns="columns"
              @confirm="onConfirm"
              @cancel="showPicker = false"
            />
          </van-popup>
        </van-col>
        <van-col span="4">
          <div >
            <van-button style="height: 2.3rem" color="grey" native-type="submit" @click="submitButton">搜索</van-button>
          </div>
        </van-col>

      </van-row>

    </van-form>


    <div v-for="item in indexList">
      <!--这里有一个BUG 就是路由跳转的时候  需要图片和文字都要获取到id进行跳转-->
      <van-grid :column-num="2" :square="true" :border="false" >
        <van-grid-item @click="tiaohzuan(item.constructionId,item.supplierId)">
          <van-image
            width="150"
            height="150"
            :src="item.conUrl"
          />
        </van-grid-item>
        <van-grid-item  @click="tiaohzuan(item.constructionId,item.supplierId)" align="left">
          <div>
            <p>{{item.shopsName}}</p>
            <p style="font-size: 0.6rem">已交保证金{{item.balanceMoney}}元</p>
            <p ><van-rate v-model="item.threeTeamId" allow-half void-icon="star" void-color="#eee" /></p>
<!--            <p style="font-size: 0.6rem">{{item.descript}}</p>-->
            <p style="font-size: 1rem">{{item.address}}</p>
<!--            <p style="font-size: 0.6rem">距离:2.8km</p>-->
          </div>
        </van-grid-item>
      </van-grid>
      <van-divider :style="{ color: '#1989fa', borderColor: '#1989fa', padding: '0 16px' }" />
    </div>

  </div>
</template>

<script>
  import areaList from '@/utils/area';
  import { findAllListBuildingTwo,findAllListBuildingTong, findAllById,findAlladdres,zhuangxiuList,teamNameZhuang,teamNameZhuangTong,tongchengList } from "@/api/constructionTeam/building";
  import {  province, findByprovinceCode, findBycityCode } from "@/api/commodity/shop_product";

  export default {
    name: "citywide_index",
    data(){
      return{
        teamNamea:"",
        value: '',
        columns: [],
        showPicker: false,
        reslist:[],
        addressaa:"",
        form:{},
        // 选择地区展示
        showArea:false,
        areaTest:"请选择省市区",
        areaList,
        constructionId: '',
        // params: {
        //   pageNum: 1,
        //   pageSize: 10,
        // },
        indexList:[],
        indexListaaa:[],
        valuepx: 2.5,
        // 显示搜索条件
        showSearch: true,
        show: false,
        images: [
          require(
            '@/assets/xiu1.jpg',
          ),
          require(
            '@/assets/xiu2.png',
          ),
          require(
            '@/assets/xiu3.jpg',
          )
        ],

        AddressProvince: [],//省份集合
        AddressCity: [],//城市集合
        AddressTown: [],//区域集合
        provinceCode: '',//获取选中时的省份编号
        cityCode: '',//获取选中时的城市编号
        townCode: '', //获取选中时区域的编号
      }
    },

    created(){
      this.carouselArea = this.$route.query && this.$route.query.carouselArea;
      this.init();
      this.findAllListBuildingTwo();
      this.zhuangxiuList();
      // this.findAlladdresaa(address);
    },
    watch:{
      provinceCode:{
        handler () {
          this.AddressCity =[];
          this.AddressTown = [];
          this.cityCode ="";
          this.townCode="";
          this.findByprovince();
        }
      },

      cityCode: {
        handler () {
          this.findBycity();
        }
      }

    },
    methods: {

      zhuangxiuList(){
        tongchengList().then(res=>{
          for(let i=0;i<res.data.length;i++){
            this.columns[i] = res.data[i].teamName;
            console.log("** this.columns**"+ this.columns)
          }
        })
      },

      onConfirm(value) {
        this.value = value;
        this.showPicker = false;
      },
      // findAlladdresaa(address){
      //
      // },


      // 地址取消事件
      cancelArea(res){
        this.showArea = false;
      },

      submitButton(){
        var teamName = this.value;
        teamNameZhuangTong(teamName).then(res=>{
          this.indexList = res.data;
        })
      },

      // 地址确定事件
      confirmArea(res){
        this.areaTest = "";
        for (let i = 0; i < res.length; i++){
          this.areaTest += res[i].name;
        }
        for (let i=0;i<res.length;i++){
          console.log(this.addressaa = res[0].name+res[1].name+res[2].name)
        }
        var address = this.addressaa;
        findAlladdres(address).then(res=>{
          this.indexList = res.data;
        })

        this.showArea = false;
      },


      tiaohzuan(constructionId,supplierId){
        this.$router.push({path:"/ShopTongcheng",
          query:{
            constructionId: constructionId,
            supplierId: supplierId
          }});
      },

      findAllListBuildingTwo(){
        if (this.carouselArea == ''){
          findAllListBuildingTong(this.params).then(res=>{
            this.indexList = res.data.rows;
          })
        }else{
          var address = this.carouselArea;
          findAlladdres(address).then(res=>{
            this.indexList = res.data;
          })

        }
      },


      init(){
        var that = this;
        province().then(res=>{
          that.AddressProvince = res.data;
        })
      },

      findByprovince(){
        findByprovinceCode(this.provinceCode).then(res=>{
          this.AddressCity = res.data;
        })
      },

      findBycity(){
        findBycityCode(this.cityCode).then(res=>{
          this.AddressTown = res.data;
        })
      },






      /** 搜索按钮操作 */
      handleQuery() {
        this.params.pageNum = 1;
        this.findAllListBuildingTwo();
      },
      /** 重置按钮操作 */
      resetQuery() {
        this.resetForm("queryForm");
        this.handleQuery();
      },

      onSearch(){
        console.log("111")
      },


      showPopup() {
        console.log("88888")
        this.show = true;
      },


    },

  }
</script>

<style scoped>

  .goods-card {
    margin: 0;
    background-color: @white;
  }
  .divcss5{width:5rem;height:2rem;border:0.1rem solid #F00}
  .delete-button {
    height: 100%;
  }

  .demo-nav{
    position: relative;
    display: -webkit-box;
    display: -webkit-flex;
    display: flex;
    -webkit-box-align: center;
    -webkit-align-items: center;
    align-items: center;
    -webkit-box-pack: center;
    -webkit-justify-content: center;
    justify-content: center;
    height: 3.2rem;
    background-color: #fff;
  }
  .demo-nav__title {
    font-weight: 450;
    font-size: 1.3rem;
    text-transform: capitalize;
  }
  .demo-nav__back {
    position: absolute;
    top: 16px;
    left: 16px;
    width: 24px;
    height: 24px;
    cursor: pointer;
  }
  .img_tu{
    width: 100%;
    height: 10rem;
  }

  .search_bar {
    display: flex;
    height: 10.133vw;
    width: 100%;
    margin-top: 1.867vw;
    line-height: 10.133vw;
    font-size: 3.733vw;
    background-color: #ffffff;
    border-radius: 13.333vw;
    box-shadow: 0.533vw 0.533vw 1.333vw rgb(219, 219, 219);
    padding: 0px 19.999px;
    box-sizing: border-box;
  }
  .hot_key {
    color: #000000;
  }
  .search_icon {
    line-height: 10.133vw;
    font-size: 4.8vw;
    margin-right: 2.667vw;
    color: #999999;
  }
  .content {
    padding: 0.16rem 0.16rem 1.6rem;
  }
  .index_header {
    height: 14.4vw;
    background-color: #ffffff;
    box-sizing: border-box;
    width: 100%;
    padding: 0px 4vw;
  }
  .area {
    height: 14.4vw;
    line-height: 14.4vw;
    color: #777777;
    width: 100%;
  }
</style>
